<template>
  <div class="bar-chart-wrapper">
    <!-- <button type="button" @click="refreshData">刷新</button> -->
    <BaseEcharts :chartData="realTimeData" ref="bar" height="200px" />
  </div>
</template>

<script>
import BaseEcharts from './echart.vue'
export default {
  name: 'BoxLeftB',
  components: {
    BaseEcharts
  },
  data() {
    return {
      barData: [
        { label: '世维图', value: 80, per: 0, max: 110 },
        { label: '永光彩印', value: 40, per: 0, max: 111.5 },
        { label: '兴永合', value: 30, per: 0, max: 113.1 },
        { label: '美科安防', value: 70, per: 0, max: 115.5 },
        { label: '合兴包装', value: 65, per: 0, max: 137.5 },
        { label: '名祥科技', value: 123, per: 0, max: 140.2 },
        { label: '信和达', value: 110, per: 0, max: 145.1 },
        { label: '毅兴行', value: 80, per: 0, max: 191.5 },
        { label: '联达科技', value: 70, per: 0, max: 114.6 }
      ],
      realTimeData: [],
      intervalIns: null
    }
  },
  mounted() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      this.realTimeData = []
      setTimeout(() => {
        this.realTimeData = this.barData.map(item => {
          const num = this.toFixed(item.value / item.max, 4)
          const perNum = this.toFixed(num * 100, 2)
          return {
            ...item,
            num,
            perNum,
            per: perNum + '%'
          }
        })
      }, 50)
    },
    toFixed(n, fixedNum = 2) {
      return ~~(Math.pow(10, fixedNum) * n) / Math.pow(10, fixedNum)
    }
  },
  destroyed() {
    clearInterval(this.intervalIns)
  }
}
</script>

<style scoped></style>
